"use strict";
import * as React from 'react';
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
const { View, TouchableOpacity, } = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
const { connect } = require('react-redux');
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import { SCREEN_WIDTH } from "../../constant";
import NavBackButton from "../../component/BackButton";
import SearchBar from "../../component/SearchBar";
const { DatePicker } = require('antd-mobile');
class ReserveWorkSpacePage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.changeTab = (currentTab) => {
            if (this.state.currentTab === currentTab)
                return;
            if (currentTab === 2) {
                this.setState({ currentTab, visible: true });
            }
            else {
                this.setState({ lastTab: currentTab, currentTab, visible: false });
            }
        };
        this.state = {
            currentTab: 0,
            lastTab: 0,
            visible: false,
            dpValue: null,
        };
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={<SearchBar placeholder='探索会员圈' rightButtonWidth={0} leftButtonWidth={60} editable={false} onPress={Actions.search}/>}/>

                <View style={[commonStyles.flexRow, { backgroundColor: Colors.Primary }]}>
                    {['今天', '明天', '选择日期'].map((text, index) => {
            return (<TouchableOpacity key={index} style={[commonStyles.flex1, {
                    height: autoSize(49)
                }]} onPress={this.changeTab.bind(this, index)}>
                                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyText color={index === this.state.currentTab ? Colors.Active : Colors.SubTitle}>{text}</MyText>
                                </View>
                                {index === this.state.currentTab ?
                <Line width={autoSize(SCREEN_WIDTH / 3)} height={4} color={Colors.Active}/> : null}
                            </TouchableOpacity>);
        })}
                </View>


                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                    <MyText>暂无空余工作场地可供预定</MyText>
                </View>
                <DatePicker visible={this.state.visible} value={this.state.dpValue} onOk={date => this.setState({ dpValue: date, visible: false, currentTab: this.state.lastTab })} onDismiss={() => this.setState({ visible: false, currentTab: this.state.lastTab })}/>
            </View>);
    }
}
export default connect(({ auth, sys, room }) => ({ auth, sys, room }))(ReserveWorkSpacePage);
